<template>
  <div>
    <SearchForm @search="getTableData" @reset="resetSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[1511]">
        <el-form-item :label="$t('所属租户')">
          <el-select
              style="width: 100%"
              @change="tenantChange"
              v-model="page.adminUserId"
              clearable
          >
            <el-option
                v-for="item in tenantList"
                :key="item.adminUserId"
                :label="item.adminName"
                :value="item.adminUserId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('APP名称')">
          <el-select
              style="width: 100%"
              v-model="page.productName"
              clearable
          >
            <el-option
                v-for="item in productList"
                :key="item.productId"
                :label="item.appName"
                :value="item.productName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')" label-width="100px">
          <el-input v-model="page.userName"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号')" label-width="100px">
          <el-input v-model="page.phone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('身份证号码')" label-width="100px">
          <el-input v-model="page.idCard"/>
        </el-form-item>
      </el-col>
    </SearchForm>
    <el-card shadow="never" style="margin-top: 10px">
      <Table :table-data="tableData" :table-column="tableColumn" :page="page" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange">
        <template slot="handle" slot-scope="{row}">
          <el-button type="text" @click="getCouponDetails(row)">{{ $t('明细') }}</el-button>
        </template>
      </Table>
    </el-card>

    <!--    优惠券明细-->
    <Dialog :visible.sync="visibleDetails" :title="$t('优惠券明细')" width="65%" :footer="false">
      <div style="margin-bottom: 15px">
        <h3 style="margin:0 0 15px 0">{{ $t('优惠券基本信息') }}</h3>
        <Table border :tableColumn="detailsTableColumn" :tableData="detailsTableData" :page="false"></Table>
      </div>
      <div>
        <h3 style="margin:0 ">{{ $t('优惠券核销数据') }}</h3>
        <el-row :gutter="24" style="margin: 15px 0  ">
          <el-form label-width="80px">
            <el-col :span="6" :xs="24">
              <el-form-item :label="$t('优惠券名称')" label-width="100px">
                <el-input v-model="usePage.name"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item :label="$t('优惠券类型')" label-width="100px">
                <el-select style="width: 100%" v-model="usePage.type" clearable>
                  <el-option v-for="item in couponType" :value="item.value" :key="item.value"
                             :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item :label="$t('使用情况')">
                <el-select style="width: 100%" clearable v-model="usePage.status">
                  <el-option :value="0" :label="$t('已使用')"></el-option>
                  <el-option :value="1" :label="$t('未使用')"></el-option>
                  <el-option :value="2" :label="$t('已过期')"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item :label="$t('获取方式')">
                <el-select style="width: 100%" v-model="usePage.getType" clearable>
                  <el-option v-for="item in couponGetType" :value="item.value" :key="item.value"
                             :label="item.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-form-item :label="$t('订单编号')">
                <el-input v-model="usePage.orderId"/>
              </el-form-item>
            </el-col>
            <el-col :span="6" :xs="24">
              <el-button type="primary" @click="getCouponConsume">{{ $t('查询') }}</el-button>
              <el-button @click="clearConsumeSearch">{{ $t('重置') }}</el-button>
            </el-col>
          </el-form>
        </el-row>
        <Table border :tableColumn="useDetailsTableColumn" :tableData="useDetailsTableData" :page="usePage"
               @handleSizeChange="useHandleSizeChange"
               @handleCurrentChange="useHandleCurrentChange">
          <template slot="type" slot-scope="{row}">
            {{ couponType.find(item => item.value === row.type).label }}
          </template>
          <template slot="sendUser" slot-scope="{row}">
            {{ sendSmsType.find(item => item.value === row.sendUser).label }}
          </template>
          <template slot="sendApp" slot-scope="{row}">
            {{ row.sendApp === 1 ? $t('全部APP') : row.sendApp === 2 ? $t('指定APP') : $t('指定类型') }}
          </template>
          <template slot="getType" slot-scope="{row}">
            {{ couponGetType.find(item => item.value === row.getType).label }}
          </template>
          <template slot="status" slot-scope="{row}">
            {{ row.status === 0 ? $t('已使用') : row.status === 1 ? $t('未使用') : $t('已过期') }}
          </template>
        </Table>
      </div>
    </Dialog>
  </div>
</template>

<script>
import {couponUserDetailsList, couponUseData} from "@/api/marketing";
import {selectTenant, selectProduct} from "@/api/system";

export default {
  name: "CouponUserList",
  data() {
    return {
      tenantList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableColumn: [
        {label: this.$t("用户姓名"), prop: 'userName', minWidth: 100},
        {label: this.$t("手机号"), prop: 'phone', minWidth: 100,},
        {label: this.$t("身份证号码"), prop: 'idCard', minWidth: 100},
        {label: this.$t("APP名称"), prop: 'appName', minWidth: 100},
        {label: this.$t("领取数量"), prop: 'getNum', minWidth: 100},
        {label: this.$t("已使用"), prop: 'useNum', minWidth: 100,},
        {label: this.$t("未使用"), prop: 'notUseNum', minWidth: 100,},
        {label: this.$t("已过期"), prop: 'dueNum', minWidth: 100,},
        {label: this.$t("操作"), slot: 'handle', minWidth: 150, fixed: 'right'},
      ],
      tableData: [],
      sendSmsType: [
        {label: this.$t("游客"), value: 1},
        {label: this.$t("注册未申请"), value: 2},
        {label: this.$t("待还款"), value: 3},
        {label: this.$t("逾期"), value: 4},
        {label: this.$t("结清未复借"), value: 5}
      ],
      couponType: [
        {label: this.$t("免息券"), value: 1},
        {label: this.$t("还款券"), value: 2},
        {label: this.$t("罚息券"), value: 3}
      ],
      couponGetType: [
        {label: this.$t("用户主动领取"), value: 1},
        {label: this.$t("手动定向发放"), value: 2},
        {label: this.$t("系统自动触发发放"), value: 3}
      ],
      detailsTableColumn: [],
      detailsTableData: [],
      couponVisible: {
        isShow: false,
        type: '',
        title: '',
      },
      visibleDetails: false,
      tableRows: {},
      usePage: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      useDetailsTableColumn: [
        {label: this.$t("优惠券名称"), prop: 'name', minWidth: 100},
        {label: this.$t("优惠券类型"), prop: 'type', minWidth: 100, slot: 'type'},
        {label: this.$t("面额"), prop: 'amount', minWidth: 100},
        {label: this.$t("发放对象"), prop: 'sendUser', minWidth: 100, slot: 'sendUser'},
        {label: this.$t("获取方式"), prop: 'getType', minWidth: 100, slot: 'getType'},
        {label: this.$t("发放APP"), prop: 'sendApp', minWidth: 100, slot: 'sendApp'},
        {label: this.$t("有效天数"), prop: 'validDay', minWidth: 100},
        {label: this.$t("获取时间"), prop: 'getTime', minWidth: 100},
        {label: this.$t("使用情况"), prop: 'status', minWidth: 100, slot: 'status'},
        {label: this.$t("使用时间"), prop: 'useTime', minWidth: 100},
        {label: this.$t("订单编号"), prop: 'orderId', minWidth: 100},
      ],
      useDetailsTableData: [],
      productList: []
    }
  },

  mounted() {
    this.getTableData()
    selectTenant().then(res => {
      this.tenantList = res.data
      if (this.tenantList.length > 0) this.$set(this.page, 'adminUserId', this.tenantList[0].adminUserId)
    })
    selectProduct().then(res => {
      this.productList = res.data
    })

  },
  methods: {
    async getTableData() {
      const params = {
        ...this.page,
      }
      const res = await couponUserDetailsList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page.total = total
      }
    },
    resetSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
    async couponConfirm() {
      const res = await this.$refs.couponModel.submitForm()
      if (res.code === 1) {
        this.couponVisible.isShow = false
        this.getTableData()
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async getCouponDetails(row) {
      this.visibleDetails = true
      this.tableRows = {...row}
      this.detailsTableData = [{...row}]
      const column = [...this.tableColumn]
      this.detailsTableColumn = column.slice(0, column.length - 1)
      this.getCouponConsume()
    },
    //  获取优惠券使用情况
    async getCouponConsume() {
      const consumeRes = await couponUseData({...this.usePage, couponId: this.tableRows.couponId})
      if (consumeRes.code === 1) {
        const {list, total} = consumeRes.data
        this.useDetailsTableData = list
        this.usePage.total = total
      }
    },
    clearConsumeSearch() {
      this.usePage = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getCouponConsume()
    },
    tenantChange(value) {
      selectProduct({adminUserId: value}).then(res => {
        this.productList = res.data
        this.$set(this.page, 'productName', [])
      })
    },
    useHandleSizeChange(val) {
      this.page.pageSize = val
      this.getCouponConsume()
    },
    useHandleCurrentChange(val) {
      this.page.pageNum = val
      this.getCouponConsume()
    },
  },

}
</script>

<style scoped>

</style>
